<script setup>
import Searchlist from "../components/searchlist.vue";
import Topfilter from "../components/topfilter.vue";
import Recommend from "../components/recommend.vue";
import {onMounted, reactive} from "vue";
import {getAllHotel, getFilterHotel} from "@/api/hotel";

const hotelData = reactive({
  searchInfo: {},
  hotelList: []
});

async function getAllHotelList() {
  const {data: res} = await getAllHotel();

  if (res && res.code === 200) {
    hotelData.hotelList = res.data;
  }
}

async function getFilterHotelList() {
  const {data: res} = await getFilterHotel();

  if (res && res.code === 200) {
    hotelData.hotelList = res.data;
  }
}

const handleSearchHotel = (val) => {
  hotelData.searchInfo = val;
  getFilterHotelList(hotelData.searchInfo);
};

onMounted(() => {
  getAllHotelList();
});

</script>

<template>
  <Searchlist @searchHotel="handleSearchHotel"/>
  <Topfilter/>
  <!-- 推荐酒店  -->
  <Recommend :hotelList="hotelData.hotelList"/>
</template>

<style scoped>

</style>
